<div class="credit_card">
  <%= form_tag '/invoices/pay_with_credit_card', method: 'post', id: 'cc_form', novalidate: "", :remote => true do -%>
      <div id="cc_popup" class="modal hide fad" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="model_grey_container">
          <div class="modal-header">

            <h1><%= t('views.credit_card.pay_by_credit_card') %></h1>

            <p><%= t('views.credit_card.cc_prompt') %> (<%= @invoice.invoice_number %>)
              of <%= number_to_currency(@invoice.unpaid_amount, unit: @invoice.currency.present? ? @invoice.currency.unit : '$') %></p>

            <div class="cross_btn">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                <%= image_tag "cross.png", :size => "7x7", :alt => "" %>
              </button>
            </div>
          </div>

          <div id="cc_popup_error" class="alert alert-error popup" style="display:none;">
            <button class="close" type="button" style="margin:0px;">×</button>
            <table>
              <tbody>
              <tr>
                <td>
                  <span></span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>

          <div class="modal-body">

            <div class="content_middle">

              <div class="fields_content">
                <div class="fields_content_container">

                  <div class="fields_content_data">

                    <div class="field_row">
                      <div class="label_field left single"><span><%= t('views.common.type') %></span></div>
                      <div class="large_field">
                        <%= select_tag "cc_type", options_for_select(CREDIT_CARD_TYPE), {:class => "cc_type large", :id => "cc_type"} %>
                      </div>
                    </div>
                    <!--field_row-->

                    <div class="field_row description">
                      <div class="label_field left single"><span><%= t('views.credit_card.card_holder_name') %></span></div>
                      <div class="small_field">
                        <%= text_field_tag :first_name, '', :required => "" %>
                        <ul class="field_description">
                          <li><%= t('views.clients.first_name') %></li>
                        </ul>
                      </div>
                      <div class="small_field right">
                        <%= text_field_tag :last_name, '', :required => "" %>
                        <ul class="field_description">
                          <li><%= t('views.clients.last_name') %></li>
                        </ul>
                      </div>
                    </div>
                    <!--field_row-->

                    <div class="field_row">
                      <div class="label_field left single"><span><%= t('views.credit_card.cc_number') %></span></div>
                      <div class="medium_field">
                        <%= text_field_tag :cc_number, '', :required => "" %>
                      </div>
                    </div>
                    <!--field_row-->

                    <div class="field_row description">
                      <div class="label_field left single"><span><%= t('views.credit_card.expiry_date') %></span></div>
                      <div class="small_field">
                        <%#= text_field_tag :cc_month %>
                        <%= select_month 1, {:use_short_month => true, :include_blank => false, :prompt => false}, {:name => 'cc_month'} %>
                        <ul class="field_description">
                          <li><%= t('views.common.month') %></li>
                        </ul>
                      </div>
                      <div class="small_field right">
                        <%#= text_field_tag :cc_year %>
                        <%= select_year Date.today, {:start_year => Time.now.year, :end_year => Time.now.year + 10, :include_blank => false}, {:id => 'cc_year', :name => 'cc_year'} %>
                        <ul class="field_description">
                          <li><%= t('views.common.year') %></li>
                        </ul>
                      </div>
                    </div>
                    <!--field_row-->

                    <div class="field_row">
                      <div class="label_field left single"><span><%= t('views.credit_card.verification_code') %></span></div>
                      <div class="medium_field">
                        <%= text_field_tag :cc_verification, '', :required => "" %>
                        <%= hidden_field_tag :invoice_id, params[:inv_id] %>
                      </div>
                    </div><!--field_row-->

                    <div class="field_row">
                      <p><b><%= t('views.common.note') %>:</b> <%= t('views.credit_card.privacy') %>.</p>
                    </div>
                    <script>$(".field_row").last().css('min-height', '0px');</script>
                    <script>$(".field_row").last().css('margin-bottom', '0px');</script>

                  </div>
                  <!--fields_content_data-->
                </div>
                <!--fields_content_container-->
              </div>
              <!--fields_content-->


            </div>

          </div>
          <div class="footer ">
            <%= submit_tag t('views.credit_card.pay_invoice'), :class => "btn_large submit" %>
            <a href="#" data-dismiss="modal" class="btn_large grey"><%= t('views.common.cancal') %></a>
          </div>
        </div>
      </div>
  <% end %>
</div>